<template>
  <div class="filed">
    <div class="title">已归档事件</div>
    <el-card class="box-card">
      <el-row>
        <el-col :span="2">
          <el-input
            v-model="query.filter.key"
            placeholder="输入事件类型"
            size="mini"
            class="top-ipt"
          ></el-input>
        </el-col>
        <el-col :span="2">
          <el-select
            v-model="query.filter.occDept"
            placeholder="发生科室"
            size="mini"
            class="top-ipt"
          >
            <el-option
              v-for="item in 科室"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select
            v-model="query.filter.reportDept"
            placeholder="上报科室"
            size="mini"
            class="top-ipt"
          >
            <el-option
              v-for="item in 科室"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select
            v-model="query.filter.grade"
            placeholder="事件等级"
            size="mini"
            class="top-ipt"
          >
            <el-option
              v-for="item in 事件等级"
              :key="item.dictcode"
              :label="item.name"
              :value="item.dictcode"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-date-picker
            v-model="query.filter.occTimeStart"
            align="right"
            type="date"
            placeholder="发生日期起"
            size="mini"
            style="width: 140px; margin-left: 5px"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-date-picker
            v-model="query.filter.occTimeEnd"
            align="right"
            type="date"
            placeholder="发生日期至"
            size="mini"
            style="width: 140px; margin-left: 5px"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-date-picker
            v-model="query.filter.reportTimeStart"
            align="right"
            type="date"
            placeholder="上报日期起"
            size="mini"
            style="width: 140px; margin-left: 5px"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-date-picker
            v-model="query.filter.reportTimeEnd"
            align="right"
            type="date"
            placeholder="上报日期至"
            size="mini"
            style="width: 140px; margin-left: 5px"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="2">
          <el-input
            v-model="query.filter.name"
            placeholder="输入患者姓名"
            size="mini"
            class="top-ipt"
          ></el-input>
        </el-col>
        <el-col :span="2">
          <el-input
            v-model="query.filter.eventNo"
            placeholder="输入事件编码"
            size="mini"
            class="top-ipt"
          ></el-input>
        </el-col>
        <el-col :span="2">
          <el-select
            v-model="query.filter.status"
            placeholder="事件状态"
            size="mini"
            class="top-ipt"
          >
            <el-option label="全部" value="-1"> </el-option>
            <el-option label="驳回到上报人" value="0"> </el-option>
            <el-option label="处理中" value="1"> </el-option>
            <el-option label="已结案" value="2"> </el-option>
            <el-option label="已归档" value="3"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select
            v-model="query.filter.patientType"
            placeholder="患者类型"
            size="mini"
            class="top-ipt"
          >
            <el-option label="全部" value="-1"> </el-option>
            <el-option label="住院" value="1"> </el-option>
            <el-option label="门诊" value="2"> </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="2" v-if="false">
          <el-select
            v-model="query.filter.evaluate"
            placeholder="评价状态"
            size="mini"
            class="top-ipt"
          >
            <el-option label="全部" value="-1"> </el-option>
            <el-option label="未评价" value="0"> </el-option>
            <el-option label="满意" value="1"> </el-option>
            <el-option label="不满意" value="2"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-select
            v-model="query.filter.endStateluate"
            placeholder="作废状态"
            size="mini"
            class="top-ipt"
          >
            <el-option label="全部" value="-1"> </el-option>
            <el-option label="未作废" value="0"> </el-option>
            <el-option label="已作废" value="1"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            style="float: right"
            @click="getTable"
            >搜索</el-button
          >
        </el-col>
      </el-row>
    </el-card>
    <el-row>
      <el-col :span="18">
        <el-table
          :data="tableData"
          style="width: 100%; margin: 10px"
          height="600"
          :header-cell-style="{
            background: 'rgb(246,250,253)',
            color: '#000000',
          }"
          border
          @row-click="Look2"
        >
          <el-table-column prop="events.eventno" label="事件编号" />
          <el-table-column prop="eventTypeName" label="事件类型" />
          <el-table-column prop="events.grade" label="事件等级">
            <template slot-scope="scope">
              <span v-if="scope.row.events.grade == 100">Ⅰ级</span>
              <span v-if="scope.row.events.grade == 101">Ⅱ级</span>
              <span v-if="scope.row.events.grade == 102">Ⅲ级</span>
              <span v-if="scope.row.events.grade == 103">Ⅳ级</span>
            </template>
          </el-table-column>
          <el-table-column prop="patient.name" label="患者姓名" />
          <el-table-column prop="events.occtime" label="发生时间" />
          <el-table-column prop="events.reporttime" label="上报时间" />
          <el-table-column prop="taskStatusName" label="状态">
            <!-- <template slot-scope="scope">
              <span v-if="scope.row.events.status == 0 && nowOrd == '牟定'"
                >处理中</span
              >
              <span v-if="scope.row.events.status == 0 && nowOrd != '牟定'"
                >驳回到上报人</span
              >
              <span v-if="scope.row.events.status == 1">处理中</span>
              <span v-if="scope.row.events.status == 2">已结案</span>
              <span v-if="scope.row.events.status == 3">已归档</span>
            </template> -->
          </el-table-column>
          <el-table-column prop="events.status" label="追踪状态">
            <template slot-scope="scope">
              {{ scope.row.traceStatus == true ? "已追踪" : "未追踪" }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="240">
            <template slot-scope="scope">
              <!-- <el-button
                size="mini"
                @click="Look(scope.row.events, 1)"
                type="text"
                >事件状态</el-button
              > -->
              <el-button size="mini" @click="Look(scope.row, 2)" type="text"
                >查看表单</el-button
              >
              <el-button
                v-if="!scope.row.traceStatus"
                size="mini"
                @click="ToSet(scope.row.events, 'yes')"
                type="text"
                >追踪事件</el-button
              >
              <el-button
                v-if="scope.row.traceStatus"
                size="mini"
                @click="ToSet(scope.row.events, 'no')"
                type="text"
                >取消追踪</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="block" style="text-align: center; margin-top: 5px">
          <el-pagination
            layout="prev, pager, next"
            :page-size="query.pageSize"
            :current-page="query.currentPage"
            :total="total"
            @current-change="page_change"
          >
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="6">
        <el-card
          class="box-card"
          style="margin-left: 20px; height: 600px; overflow: auto"
        >
          <div slot="header" class="clearfix">
            <span>事件状态</span>
          </div>
          <div>
            <el-steps
              direction="vertical"
              :active="事件状态.length"
              finish-status="success"
            >
              <el-step
                style="height: 60px"
                :title="item.linkname"
                v-for="item in 事件状态"
                :key="item.id"
                :description="item.steptime"
              ></el-step>
            </el-steps>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      tableData: [],
      科室: [],
      事件等级: [],
      query: {
        currentPage: 1,
        pageSize: 15,
        filter: {
          key: "",
          occDept: "",
          reportDept: "",
          grade: "",
          occTimeStart: "",
          occTimeEnd: "",
          reportTimeStart: "",
          reportTimeEnd: "",
          name: "",
          eventNo: "",
          status: 2,
          patientType: "",
          evaluate: "",
          endStateluate: "",
          EventType: 0,
          archives: 1,
        },
      },
      total: 0,
      事件状态: [],
      nowOrd: baseUrl.ord,
    };
  },
  mounted() {
    this.getGroup();
    this.getTable();
    this.getZhuangTai();
  },
  methods: {
    getZhuangTai() {
      var body = {
        typeCode: "BLSJDJ",
      };
      this.$post("/Aers/ZdDict/GetAll", body).then((res) => {
        this.事件等级 = res.data;
      });
    },
    getGroup() {
      this.$post("/System/Group/GetAll").then((res) => {
        this.科室 = res.data;
      });
    },
    getTable() {
      var body = this.query;
      this.$post("/Aers/ReportEvent/GetEventList", body).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    page_change(val) {
      this.query.currentPage = val;
      this.getTable();
    },
    Look(row, flag) {
      if (flag == 1) {
        console.log(row);
        this.$get(
          "/Aers/ReportEvent/GetTaskList?eventNo=" + row.events.eventno
        ).then((res) => {
          this.事件状态 = res.data;
        });
        return;
      }
      if (flag == 2) {
        // window.open("/#/BD?id=" + row.id + "&flag=" + true);
        // this.$router.push(
        //   "/BD?id=" +
        //     row.id +
        //     "&flag=" +
        //     true +
        //     "&Token=" +
        //     localStorage.getItem("Token")
        // );
        this.$router.push(
          "/BD?id=" +
            row.events.id +
            "&flag=" +
            true +
            "&Token=" +
            localStorage.getItem("Token") +
            "&reportdeptStr=" +
            row.reportdeptStr +
            "&reportuserStr=" +
            row.reportuserStr +
            "&eventTypeName=" +
            row.eventTypeName
          // "&Btn_show=" +
          // true
        );
        return;
      }
    },
    Look2(row) {
      this.$get(
        "/Aers/ReportEvent/GetTaskList?eventNo=" + row.events.eventno
      ).then((res) => {
        this.事件状态 = res.data;
      });
    },
    ToSet(row, flag) {
      if (flag == "yes") {
        let body = {
          eventno: row.eventno,
        };
        this.$post("Aers/DataTrace/Create", body).then((res) => {
          this.getTable();
          this.$message.success("操作成功！");
        });
        return;
      }
      if (flag == "no") {
        this.$deleteF("Aers/DataTrace/Delete?eventno=" + row.eventno).then(
          (res) => {
            this.getTable();
            this.$message.success("操作成功！");
          }
        );
        return;
      }
    },
  },
};
</script>
<style scoped>
body {
  background-color: #f8f9fa;
}
.box-card {
  margin: 5px;
}
.el-card /deep/ .el-card__header {
  padding: 10px 20px;
  background-color: #e2e2e2;
}
.top-ipt {
  margin-left: 5px;
}
.title {
  background-color: rgb(233, 242, 255);
  line-height: 45px;
  font-size: 18px;
  font-weight: 700;
  padding: 0 10px;
}
</style>